<template>
	<el-container>
		<el-header class="elheader">
			<el-row :gutter="20">
				<el-col :span="6">
					<h3 style="line-height: 60px;color: white;">石泉-网上购书商城演示系统0.91V</h3>
				</el-col>
				<el-col :span="13">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
						<el-menu-item index="/home" style="margin-left: 150px;">主页</el-menu-item>
						<el-menu-item index="/home/details">商品详细</el-menu-item>
						<el-menu-item index="/home/cart">购物车</el-menu-item>
						<el-menu-item index="/home/myorder">我的订单</el-menu-item>
						<el-menu-item index="/home/personal">个人信息设置</el-menu-item>
					</el-menu>
				</el-col>
				<el-col :span="4">
					<el-avatar :size="50" :src="circleUrl"></el-avatar>
					<el-button type="text" @click="btn()">未登录</el-button>
				</el-col>
				<el-col :span="1">
					<span style="line-height: 60px;">退出</span>
				</el-col>
			</el-row>
		</el-header>
		<router-view></router-view>
		<!--  -->
		<el-dialog v-model="dialogTableVisible" width="30%">
			<span style="position: absolute;top: 8%;left: 47%;font-size: 18px;">登录</span>
			<div>
				<el-form ref="form" :model="form">
					<div style="display: flex;line-height: 40px;text-align: center;">
						<label style="width: 12%;background-color: ;">账号</label>
						<div style="width: 90%;">
							<el-input autocomplete="off" v-model="form.username"></el-input>
						</div>
					</div>
					<div style="display: flex;line-height: 40px;text-align: center;">
						<label style="width: 12%;">密码</label>
						<div style="width: 90%;">
							<el-input type="next" autocomplete="off" v-model="form.password"></el-input>
						</div>
					</div>
					<div style="text-align: center;margin-top: 40px;">
						<el-button>取消</el-button>
						<!-- <el-button type="primary" @click="toLogin()">确定</el-button> -->
						<el-button :plain="true" type="primary" @click="toLogin()" >确定</el-button>
					</div>
				</el-form>
			</div>
		</el-dialog>
	</el-container>
</template>

<script>
	// 引入拦截器
	import instance from '../ajax/index.js';
	import { ElMessage } from 'element-plus';
	// 引入Main组件
	// 
	// import Detail from './page/Detail';
	// // 
	// import DetailList from './page/DetailList';
	// // 
	// import Cart from './page/Cart';
	export default {
		name: 'Home',
		data() {
			return {
				dialogTableVisible: false,
				activeIndex: '1',
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
				form: {
					username: '',
					password: '',
					grant_type: 'password', //获取token采用密码模式
					client_id: 'sobook4', //应用ID
					client_secret: '444444', //密钥
				}
			}
		},
		methods:{
			// 登录函数
			toLogin(){
				// 备份
				let that = this;
				//将即将post请求的数据，通过qs插件进行格式转换
				let login = this.$qs.stringify( this.form );
				// 发起post请求
				/*
					请求地址					http://127.0.0.1:8093/oauth/token
					提交的数据				qs打包成SON的字符串
					配置请求头/表头headers	application/x-www-form-urlencoded	【数据作为地址栏参数提交】
				*/
			   instance.post( '/oauth/token' , login ,{
				   headers:{ 'Content-Type' : 'application/x-www-form-urlencoded' }
			   }).then( (res)=>{
				   // 将请求成功的token存入本地存储中
				   // console.log(res);
				   localStorage.setItem( 'token' , res.data.access_token );
				   
				   // get请求：当前登录者的数据
				   instance.get( '/api/info/getUser' ).then( (res)=>{
					   // console.log(res);
					   
					   localStorage.setItem('nickname',res.data.nickname);
					   localStorage.setItem('acount',res.data.account);
					   // role作用：1.确定登录者登录成功之后跳转到哪个页面：2.确定登录者能够访问的页面权限
					   localStorage.setItem('role',res.data.role);
					   this.dialogTableVisible = false;
					   // 跳转：判断role === 买家账号：前台首页：role===后台管理员，后台首页
					   if(res.data.role === 'G'){
						   // 管理元===>后台
						   this.$router.push('/admin');
						   return;
						   
					   }else{
						   // 买家
						   this.$router.push('/home');
						   return;
					   }
					   
				   }).catch( (err)=>{
					   // console.log(err);
				   })
				   
			   }).catch( (erros)=>{
				   // console.log(error);
			   })
			   ElMessage({
			       message: '登录成功',
			       type: 'success',
			   })
			},
			btn(){
				this.dialogTableVisible = true;
				
			}
		}
		// created() {
		// 	this.axios.get('/api/adm/')
		// }
	}
</script>

<style scoped>
	label {
		background-color: #f5f7fa;
		border: 1px solid #dcdfe6;
	}

	* {
		margin: 0px;
		padding: 0px;
	}

	el-menu-item {
		float: left;
	}

	.elheader {
		width: 100%;
		background-color: #3575ff;
	}

	.el-menu-demo {
		background-color: #3575ff;
	}
</style>
